"use client";

import { Button, Card, CardBody, Tabs, Tab } from "@nextui-org/react";
import { motion, AnimatePresence } from "framer-motion";
import { useState } from "react";
import {
  FiTruck,
  FiMonitor,
  FiCamera,
  FiActivity,
  FiCheck,
} from "react-icons/fi";

export default function Solutions() {
  const [selectedCase, setSelectedCase] = useState("logistics");
  const [selectedStep, setSelectedStep] = useState(0);

  const cases = {
    logistics: {
      title: "物流运输解决方案",
      description: "智能物联网卡助力物流车队实现智能化管理",
      steps: [
        {
          title: "设备安装",
          description: "在车辆上安装带有物联网卡的GPS定位设备",
          icon: FiTruck,
        },
        {
          title: "数据采集",
          description: "实时采集车辆位置、速度、油耗等数据",
          icon: FiMonitor,
        },
        {
          title: "智能分析",
          description: "系统分析运输路线，优化配送效率",
          icon: FiActivity,
        },
        {
          title: "远程管理",
          description: "实现车队的远程监控和智能调度",
          icon: FiCheck,
        },
      ],
    },
    security: {
      title: "安防监控解决方案",
      description: "为智能监控系统提供稳定的网络连接",
      steps: [
        {
          title: "摄像头部署",
          description: "安装配备物联网卡的智能摄像头",
          icon: FiCamera,
        },
        {
          title: "网络连接",
          description: "通过物联网卡建立稳定的数据传输通道",
          icon: FiMonitor,
        },
        {
          title: "视频存储",
          description: "将监控视频实时上传至云端存储",
          icon: FiActivity,
        },
        {
          title: "智能预警",
          description: "异常行为识别和实时报警推送",
          icon: FiCheck,
        },
      ],
    },
  };

  const fadeInUp = {
    initial: { opacity: 0, y: 60 },
    animate: { opacity: 1, y: 0 },
    exit: { opacity: 0, y: -60 },
  };

  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <div className="bg-gradient-to-r from-purple-600 to-blue-600 text-white">
        <div className="container mx-auto px-4 py-20">
          <motion.h1
            className="text-4xl md:text-5xl font-bold text-center mb-6"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
          >
            行业解决方案
          </motion.h1>
          <motion.p
            className="text-xl text-center max-w-2xl mx-auto"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
          >
            为不同行业提供专业的物联网连接解决方案
          </motion.p>
        </div>
      </div>

      {/* CTA Section */}
      <div className="bg-gray-50 py-20">
        <div className="container mx-auto px-4 text-center">
          <motion.h2
            className="text-3xl font-bold mb-6"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
          >
            需要定制化解决方案？
          </motion.h2>
          <motion.p
            className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
          >
            我们的专业团队随时为您提供个性化的物联网连接解决方案
          </motion.p>
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.4 }}
          >
            <Button size="lg" color="primary" variant="shadow" href="/contact">
              联系我们
            </Button>
          </motion.div>
        </div>
      </div>

      {/* Interactive Case Studies */}
      <div className="py-20">
        <div className="container mx-auto px-4">
          <motion.h2
            className="text-3xl font-bold text-center mb-12"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
          >
            案例展示
          </motion.h2>

          <div className="max-w-4xl mx-auto">
            <Tabs
              selectedKey={selectedCase}
              onSelectionChange={(key) => {
                setSelectedCase(key.toString());
                setSelectedStep(0);
              }}
              className="mb-10"
            >
              <Tab key="logistics" title="物流运输" />
              <Tab key="security" title="安防监控" />
            </Tabs>

            <AnimatePresence mode="wait">
              <motion.div
                key={selectedCase}
                initial="initial"
                animate="animate"
                exit="exit"
                variants={fadeInUp}
                transition={{ duration: 0.5 }}
              >
                <Card className="bg-gradient-to-r from-blue-500 to-purple-500 text-white mb-10">
                  <CardBody className="py-10">
                    <h3 className="text-2xl font-bold mb-4">
                      {cases[selectedCase as keyof typeof cases].title}
                    </h3>
                    <p className="text-lg opacity-90">
                      {cases[selectedCase as keyof typeof cases].description}
                    </p>
                  </CardBody>
                </Card>

                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                  {cases[selectedCase as keyof typeof cases].steps.map(
                    (step, index) => (
                      <motion.div
                        key={step.title}
                        whileHover={{ scale: 1.05 }}
                        onClick={() => setSelectedStep(index)}
                      >
                        <Card
                          className={`cursor-pointer transition-colors ${
                            selectedStep === index
                              ? "bg-primary text-white"
                              : "bg-white/70 backdrop-blur-md hover:bg-gray-50"
                          }`}
                        >
                          <CardBody className="text-center p-6">
                            <motion.div
                              initial={{ scale: 0 }}
                              animate={{ scale: 1 }}
                              transition={{
                                delay: index * 0.1,
                                type: "spring",
                                stiffness: 260,
                                damping: 20,
                              }}
                              className="flex justify-center mb-4"
                            >
                              <step.icon
                                size={32}
                                className={
                                  selectedStep === index
                                    ? "text-white"
                                    : "text-primary"
                                }
                              />
                            </motion.div>
                            <h4
                              className={`font-semibold mb-2 ${
                                selectedStep === index
                                  ? "text-white"
                                  : "text-gray-800"
                              }`}
                            >
                              {step.title}
                            </h4>
                            <p
                              className={
                                selectedStep === index
                                  ? "text-white/90"
                                  : "text-gray-600"
                              }
                            >
                              {step.description}
                            </p>
                          </CardBody>
                        </Card>
                      </motion.div>
                    )
                  )}
                </div>
              </motion.div>
            </AnimatePresence>

            <motion.div
              className="mt-10 text-center"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 0.5 }}
            >
              <Button
                size="lg"
                color="primary"
                variant="shadow"
                href="/contact"
                className="font-semibold"
              >
                了解更多详情
              </Button>
            </motion.div>
          </div>
        </div>
      </div>
    </div>
  );
}
